import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  //组件间共享的数据或者需要集中管理的数据放在state里面
  state: {
    //商品列表数据
    shoplist: [
      { 'id': 1, 'title': '电水壶', 'price': 50.01, src: '/images/1.jpg' },
      { 'id': 2, 'title': '电压力锅', 'price': 260.99, src: '/images/2.jpg' },
      { 'id': 3, 'title': '电饭煲', 'price': 200.99, src: '/images/3.jpg' },
      { 'id': 4, 'title': '电磁炉', 'price': 300.99, src: '/images/4.jpg' },
      { 'id': 5, 'title': '微波炉', 'price': 400.99, src: '/images/5.jpg' },
      { 'id': 6, 'title': '电饼铛', 'price': 200.99, src: '/images/6.jpg' },
      { 'id': 7, 'title': '豆浆机', 'price': 199.99, src: '/images/7.jpg' },
      { 'id': 8, 'title': '多用途锅', 'price': 510.99, src: '/images/8.jpg' }
    ],
    //购物车数据
    shopcart:[

    ]
  },
  //getters相当于store的计算属性，可以对state里面的数据进行计算或过滤
  getters: {
    totalPrice(state){
      var total = 0;
      state.shopcart.forEach(item => {
        total += item.price * item.num;
      })
      return total;
    }
  },
  //mutations类似方法，对state里面数据的处理都放在mutations
  mutations: {
    add(state,item){
      //判断购物车里面是否有当前添加的商品
      var first=state.shopcart.find(i => i.id == item.id);
      //如果有，商品数据+1
      if(first){
        first.num++;
      }else{//如果没有，商品添加num属性后push到shopcart
        state.shopcart.push({
          id:item.id,
          title:item.title,
          price:item.price,
          src:item.src,
          num:1
        })
      }
    },
    //删除购物车数据
    del(state,item){
      state.shopcart.forEach((i,index) => {
        if(i.id == item.id){
          state.shopcart.splice(index,1);
        }
      })
    }
  },
  actions: {
    add(context,item){
      context.commit('add',item)
    }
  },
  modules: {},
});
